<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useUserStore } from '../stores/user'
import { recipeApi } from '../request'

const userStore = useUserStore()
const weeklyPlan = ref([])
const isLoading = ref(false)
const error = ref('')

// 获取周计划
const fetchWeeklyPlan = async () => {
  try {
    isLoading.value = true
    error.value = ''

    const response = await recipeApi.getWeeklyPlan(userStore.user?.familyId)
    weeklyPlan.value = response
  } catch (e) {
    console.error('获取周计划失败:', e)
    error.value = '获取周计划失败，请稍后重试'
  } finally {
    isLoading.value = false
  }
}

// 获取星期几的文本
const getDayText = (day: number) => {
  const dayMap: Record<number, string> = {
    1: '周一',
    2: '周二',
    3: '周三',
    4: '周四',
    5: '周五',
    6: '周六',
    7: '周日'
  }
  return dayMap[day] || '未知'
}

// 获取餐点类型的文本
const getMealTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    breakfast: '早餐',
    lunch: '午餐',
    dinner: '晚餐'
  }
  return typeMap[type] || '其他'
}

// 获取菜品类型的样式
const getTypeStyle = (type: string) => {
  const styleMap: Record<string, string> = {
    meat: 'bg-red-100 text-red-600',
    vegetable: 'bg-green-100 text-green-600',
    soup: 'bg-blue-100 text-blue-600',
    other: 'bg-gray-100 text-gray-600'
  }
  return styleMap[type] || styleMap.other
}

// 获取菜品类型的中文名称
const getTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    meat: '荤菜',
    vegetable: '素菜',
    soup: '汤类',
    other: '其他'
  }
  return typeMap[type] || '其他'
}

onMounted(fetchWeeklyPlan)
</script>

<template>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <h1 class="text-3xl font-bold text-gray-900 mb-8">本周食谱</h1>
    
    <div v-if="isLoading" class="text-center py-12">
      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto"></div>
      <p class="mt-4 text-gray-600">加载周计划中...</p>
    </div>

    <div v-else-if="error" class="text-center py-12">
      <p class="text-red-500">{{ error }}</p>
      <button
        @click="fetchWeeklyPlan"
        class="mt-4 btn btn-primary"
      >
        重试
      </button>
    </div>

    <div v-else class="grid gap-6">
      <div v-for="day in weeklyPlan" :key="day.day" class="card">
        <div class="p-6">
          <h2 class="text-xl font-semibold text-gray-900 mb-4">{{ getDayText(day.day) }}</h2>
          
          <div class="space-y-6">
            <!-- 早餐 -->
            <div>
              <h3 class="text-lg font-medium text-gray-900 mb-3">早餐</h3>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <template v-for="type in ['meat', 'vegetable', 'soup']" :key="type">
                  <div
                    v-if="day.meals.breakfast[type]"
                    class="p-4 bg-gray-50 rounded-lg"
                  >
                    <RouterLink
                      :to="`/recipe/${day.meals.breakfast[type].id}`"
                      class="group block"
                    >
                      <img
                        :src="day.meals.breakfast[type].imageUrl"
                        :alt="day.meals.breakfast[type].name"
                        class="w-full h-32 object-cover rounded-lg mb-2 group-hover:opacity-90 transition-opacity duration-200"
                      />
                      <p class="text-lg font-medium text-gray-900 group-hover:text-primary-600 transition-colors duration-200">
                        {{ day.meals.breakfast[type].name }}
                      </p>
                      <span
                        class="mt-2 inline-block px-2 py-1 text-xs font-medium rounded-full"
                        :class="getTypeStyle(type)"
                      >
                        {{ getTypeText(type) }}
                      </span>
                    </RouterLink>
                  </div>
                  <div
                    v-else
                    class="p-4 bg-gray-50 rounded-lg flex items-center justify-center"
                  >
                    <p class="text-gray-400">暂无{{ getTypeText(type) }}</p>
                  </div>
                </template>
              </div>
            </div>

            <!-- 午餐 -->
            <div>
              <h3 class="text-lg font-medium text-gray-900 mb-3">午餐</h3>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <template v-for="type in ['meat', 'vegetable', 'soup']" :key="type">
                  <div
                    v-if="day.meals.lunch[type]"
                    class="p-4 bg-gray-50 rounded-lg"
                  >
                    <RouterLink
                      :to="`/recipe/${day.meals.lunch[type].id}`"
                      class="group block"
                    >
                      <img
                        :src="day.meals.lunch[type].imageUrl"
                        :alt="day.meals.lunch[type].name"
                        class="w-full h-32 object-cover rounded-lg mb-2 group-hover:opacity-90 transition-opacity duration-200"
                      />
                      <p class="text-lg font-medium text-gray-900 group-hover:text-primary-600 transition-colors duration-200">
                        {{ day.meals.lunch[type].name }}
                      </p>
                      <span
                        class="mt-2 inline-block px-2 py-1 text-xs font-medium rounded-full"
                        :class="getTypeStyle(type)"
                      >
                        {{ getTypeText(type) }}
                      </span>
                    </RouterLink>
                  </div>
                  <div
                    v-else
                    class="p-4 bg-gray-50 rounded-lg flex items-center justify-center"
                  >
                    <p class="text-gray-400">暂无{{ getTypeText(type) }}</p>
                  </div>
                </template>
              </div>
            </div>

            <!-- 晚餐 -->
            <div>
              <h3 class="text-lg font-medium text-gray-900 mb-3">晚餐</h3>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <template v-for="type in ['meat', 'vegetable', 'soup']" :key="type">
                  <div
                    v-if="day.meals.dinner[type]"
                    class="p-4 bg-gray-50 rounded-lg"
                  >
                    <RouterLink
                      :to="`/recipe/${day.meals.dinner[type].id}`"
                      class="group block"
                    >
                      <img
                        :src="day.meals.dinner[type].imageUrl"
                        :alt="day.meals.dinner[type].name"
                        class="w-full h-32 object-cover rounded-lg mb-2 group-hover:opacity-90 transition-opacity duration-200"
                      />
                      <p class="text-lg font-medium text-gray-900 group-hover:text-primary-600 transition-colors duration-200">
                        {{ day.meals.dinner[type].name }}
                      </p>
                      <span
                        class="mt-2 inline-block px-2 py-1 text-xs font-medium rounded-full"
                        :class="getTypeStyle(type)"
                      >
                        {{ getTypeText(type) }}
                      </span>
                    </RouterLink>
                  </div>
                  <div
                    v-else
                    class="p-4 bg-gray-50 rounded-lg flex items-center justify-center"
                  >
                    <p class="text-gray-400">暂无{{ getTypeText(type) }}</p>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="weeklyPlan.length === 0 && !isLoading && !error" class="text-center py-12">
      <p class="text-gray-500">暂无周计划</p>
    </div>
  </div>
</template>